
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>NodeMapper_rev0.2.10 </title>
	</head>

	
		<script type="text/css"        src="./bin/css/nodeMapper_rev0.0.css">			</script>
		<script type="text/javascript" src="./bin/js/cls/cNode_rev0.7.js">			    </script>
		<script type="text/javascript" src="./bin/js/cls/cVector_rev0.1.js">			</script>
		<script type="text/javascript" src="./bin/js/lib/lib_Canvas_rev0.0.js">			</script>
		<script type="text/javascript" src="./bin/js/lib/lib_EventHandlers_rev0.1.js"> 	</script>
		<script type="text/javascript" src="./bin/js/lib/lib_Node_rev0.1.js">			</script>
		<script type="text/javascript" src="./bin/js/lib/lib_inputMouse_rev0.0.js">		</script>
		<script type="text/javascript" src="./bin/js/lib/lib_DataRetreval_rev0.1.js">	</script>
		
			
		<script type="text/javascript">

			// screen size variables
			var SCREEN_WIDTH  = window.innerWidth;
			var SCREEN_HEIGHT = window.innerWidth; //window.innerHeight;
			var HALF_WIDTH    = SCREEN_WIDTH / 2;
			var HALF_HEIGHT   = SCREEN_HEIGHT / 2;
			var MAX_FIELDSIZE = SCREEN_HEIGHT / 2;
			
			//Supports Canvas setup
			var g_objCanvas; var g_objContext;
			var g_lnkCanvas; var g_lnkContext;
			var g_shdCanvas; var g_shdContext;
			
			//Populates Nodes & Links
			var g_arrNodeList = [];
			
			//Support Shape Zoom
			var g_SCALE = 1;
			var g_Multi = .8; //Required for Zoom (mouseWheel)
			var tranX = 1;
			var tranY = 1;
			
			//Supports Shpae Move
			var g_NodeID;
			var g_isMoveable = false;
			
			//Support Input file
			//var g_fileData;

			function init() {
				//window.addEventListener('message', onmessage, false); //Require for interFrame communication
				
				// CANVAS SET UP
				g_objCanvas  = document.getElementById('objLayer');
				g_objContext = g_objCanvas.getContext('2d');
				g_lnkCanvas  = document.getElementById('lnkLayer');
				g_lnkContext = g_lnkCanvas.getContext('2d');
				g_shdCanvas  = document.getElementById('shdLayer');
				g_shdContext = g_shdCanvas.getContext('2d');
				
				func_setupCanvas(g_objCanvas); 		//lib_Canvas_revX.js
				func_setupCanvas(g_lnkCanvas); 		//lib_Canvas_revX.js
				
				//func_createNodes(); 				//nodeMapper_revX.html
				//func_genNodes(HALF_WIDTH, HALF_HEIGHT);      //lib_Node_revX.X.js
			    //loop();
			};
				
			function loop(){
				//func_updateData(); //Part of test suite
				g_objContext.save(); g_lnkContext.save(); g_shdContext.save();
				
				if(g_arrNodeList.length > 0){
					reqAnimFrame = window.mozRequestAnimationFrame    ||
								   window.webkitRequestAnimationFrame ||
								   window.msRequestAnimationFrame     ||
								   window.oRequestAnimationFrame
					;
					reqAnimFrame(loop);
				
					g_objContext.clearRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
					g_lnkContext.clearRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
					g_shdContext.clearRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
					
					//Supports Zoom function NOTE: needs g_Multi and mouse Wheel event
					g_objContext.translate(tranX,tranY);
					g_objContext.scale(g_SCALE, g_SCALE);
					g_lnkContext.translate(tranX,tranY);
					g_lnkContext.scale(g_SCALE, g_SCALE);
					g_shdContext.translate(tranX,tranY);
					g_shdContext.scale(g_SCALE, g_SCALE);
					
					//Support Node spacing function 
					var repelforce = new Vector2(0,0);
					var mag; 
					var repelstrength; 
					
					// Created node spacing
					for (var i=0; i<g_arrNodeList.length; i++){
						var p1 = g_arrNodeList[i]; 
						repelforce.copyFrom(p1.pos);
						repelforce.x -= HALF_WIDTH; 
						repelforce.y -= HALF_HEIGHT; 				
						mag = repelforce.magnitude(); 
						repelstrength = (mag - MAX_FIELDSIZE) *-0.1; 
						if(repelstrength<0) {
							repelforce.multiplyEq(repelstrength/mag);
							p1.force.plusEq(repelforce); 		
						};
						if(i>=g_arrNodeList.length-1) continue; 
						for(var j=i+1; j<g_arrNodeList.length; j++) {
							var p2 = g_arrNodeList[j];
							repelforce.copyFrom(p2.pos); 
							repelforce.minusEq(p1.pos); 
							mag = repelforce.magnitude(); 
							repelstrength = 40-mag; // Facilitates "pressure" for Spacing between nodes
							if((repelstrength>0)&&(mag>0))	{
								repelforce.multiplyEq(repelstrength*0.01 / mag);
								p1.force.minusEq(repelforce); 
								p2.force.plusEq(repelforce); 
							};
						}; var j = null; var p2 = null;
					}; var i = null; var p1 = null;

					// iteratate through each node
					for (var i=0; i<g_arrNodeList.length; i++){
						var nodeTmp = g_arrNodeList[i]; 
						nodeTmp.update();
						nodeTmp.render(g_objContext); 
					}; var i = null; var nodeTmp = null;
				};
				g_objContext.restore(); g_lnkContext.restore(); g_shdContext.restore();
			};
			
			//Supports iframe to iframe communication
			var onmessage = function(e) {
				var data = e.data;
				var origin = e.origin;
				//document.getElementById('display').innerHTML = data;
				//alert("msg: " + data);
				g_SCALE = g_SCALE * data;
			};
		

		</script>
	<body onload="init();">
		<input type="file" onchange="handle_files(this.files)">
		<button type="button" onclick="func_exportXML();">Export</button>
		<div style="position: relative;">  
			<canvas id="shdLayer"  width="0" height="0"	style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>  
			<canvas id="lnkLayer"  width="0" height="0" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas> 
			<canvas id="objLayer"  width="0" height="0" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
			<canvas id="msgLayer"  width="0" height="0" style="position: absolute; left: 0; top: 0; z-index: 4;"></canvas>
		</div> 
	</body>
</html>
